<template>

  <el-container>
    <el-header style="height:50px">
      <el-row>
        <el-col
          :span="10"
          style="font-size:20px"
          @click.native="$router.push('/home')"
        >
          {{sysName}}
        </el-col>
        <el-col
          :span="14"
          style="text-align:right"
        >

          <el-badge
            :value="1"
            style="margin-right:20px;line-height:20px"
          >
            <el-button
              type="text"
              style="margin-right:10px"
            >消息</el-button>
          </el-badge>

          <el-dropdown
            trigger="hover"
            size="small"
          >
            <span
              class="el-dropdown-link"
              style="cursor: pointer;color:#ffffff;"
            >
              {{sysUserName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的消息</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="logout"
              >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <transition
        name="fade"
        mode="out-in"
      >
        <el-menu
          :collapse="collapsed"
          :unique-opened="true"
          @select="select"
          :default-active="currentIndex"
          class="el-menu-vertical-demo"
        >
          <template
            v-for="(item,index) in $router.options.routes"
            v-if="!item.hidden"
          >
            <el-submenu
              :index="index+''"
              :key="index"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
              </template>

              <el-menu-item
                v-for="child in item.children"
                :index="child.path"
                @click="$router.push(child.path)"
                :key="child.path"
                v-if="!child.hidden"
              >{{child.name}}</el-menu-item>

            </el-submenu>
          </template>
          <li style="text-align:center;color:#909399;hegit:56px;line-height:56px">
            <i
              :class="collapsed ?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"
              @click="collapse"
            ></i>
          </li>
        </el-menu>
      </transition>

      <el-container>
        <el-main style="height:100%">
          <el-breadcrumb
            separator="/"
            style="margin-bottom:20px"
          >
            <el-breadcrumb-item
              v-for="item in $route.matched"
              :key="item.path"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <transition
            name="fade"
            mode="out-in"
          >
            <router-view></router-view>
          </transition>
        </el-main>
        <el-footer v-show="false">版权所有© 2017-2018 九厚科技工作室 wanghaishen@jiuhoutech.com </el-footer>
      </el-container>
    </el-container>
  </el-container>

</template>
<style scoped lang="scss">
@import "@/styles/vars.scss";
.el-container {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #2d3a4b;
  color: white;
  line-height: 50px;
  height: 50px;
}
.el-menu {
  background-color: white;
  color: white;
  line-height: 200px;
}
.el-main {
  background-color: white;
  color: #333;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-width: 240px;
  min-height: 400px;
}
</style>

<script>
import avatar from '@/assets/logo.png'

export default {
  data () {
    return {
      sysName: '瑞云游戏管理系统',
      collapsed: false,
      sysUserName: '',
      sysUserAvatar: avatar,
      currentIndex: null,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleopen () {
      // console.log('handleopen');
    },
    handleclose () {
      // console.log('handleclose');
    },
    handleselect: function (a, b) {},

    // 退出登录
    logout: function () {
      var _this = this
      this.$confirm('确认退出吗?', '提示', {
        // type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem('user')
          _this.$router.push('/login')
        })
        .catch(() => {})
    },

    // 暂时没用上
    select (index, indexPath) {
      if (index !== '999') {
        this.currentIndex = index
      }
    },
    // 折叠导航栏
    collapse: function () {
      this.collapsed = !this.collapsed
    },
    showMenu (i, status) {
      this.$refs.menuCollapsed.getElementsByClassName(
        'submenu-hook-' + i
      )[0].style.display = status ? 'block' : 'none'
    }
  },
  created () {},
  mounted () {
    var user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      // debugger;
      this.sysUserName = user.name || ''
      this.sysName = user.sysName || ''
      this.sysUserAvatar = user.avatar || ''
    }
  }
}
</script>
